<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <meta name="description" content=""/>
        <meta name="keywords" content=""/>
        
        <title>ziceinclude&trade; admin version 1.4 online</title>

        <!-- Link shortcut icon-->
        <link rel="shortcut icon" type="image/ico" href="images/favicon2.ico"/> 

        <!-- Link css-->
        <link rel="stylesheet" type="text/css" href="css/zice.style.css"/>

		
        <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="components/flot/excanvas.min.js"></script><![endif]-->  
		
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="components/ui/jquery.ui.min.js"></script> 
        <script type="text/javascript" src="components/ui/jquery.autotab.js"></script>
        <script type="text/javascript" src="components/ui/timepicker.js"></script>
        <script type="text/javascript" src="components/colorpicker/js/colorpicker.js"></script>
        <script type="text/javascript" src="components/checkboxes/iphone.check.js"></script>
        <script type="text/javascript" src="components/elfinder/js/elfinder.full.js"></script>
        <script type="text/javascript" src="components/datatables/dataTables.min.js"></script>
        <script type="text/javascript" src="components/datatables/ColVis.js"></script>
        <script type="text/javascript" src="components/scrolltop/scrolltopcontrol.js"></script>
        <script type="text/javascript" src="components/fancybox/jquery.fancybox.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mousewheel.js"></script>
        <script type="text/javascript" src="components/jscrollpane/mwheelIntent.js"></script>
        <script type="text/javascript" src="components/jscrollpane/jscrollpane.min.js"></script>
        <script type="text/javascript" src="components/spinner/ui.spinner.js"></script>
        <script type="text/javascript" src="components/tipsy/jquery.tipsy.js"></script>
        <script type="text/javascript" src="components/editor/jquery.cleditor.js"></script>
        <script type="text/javascript" src="components/chosen/chosen.js"></script>
        <script type="text/javascript" src="components/confirm/jquery.confirm.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine.js"></script>
        <script type="text/javascript" src="components/validationEngine/jquery.validationEngine-en.js"></script>
        <script type="text/javascript" src="components/vticker/jquery.vticker-min.js"></script>
        <script type="text/javascript" src="components/sourcerer/sourcerer.js"></script>
        <script type="text/javascript" src="components/fullcalendar/fullcalendar.js"></script>
        <script type="text/javascript" src="components/flot/flot.js"></script>
        <script type="text/javascript" src="components/flot/flot.pie.min.js"></script>
        <script type="text/javascript" src="components/flot/flot.resize.min.js"></script>
        <script type="text/javascript" src="components/flot/graphtable.js"></script>
        <script type="text/javascript" src="components/uploadify/swfobject.js"></script>
        <script type="text/javascript" src="components/uploadify/uploadify.js"></script>        
        <script type="text/javascript" src="components/checkboxes/customInput.jquery.js"></script>
        <script type="text/javascript" src="components/effect/jquery-jrumble.js"></script>
        <script type="text/javascript" src="components/filestyle/jquery.filestyle.js"></script>
        <script type="text/javascript" src="components/placeholder/jquery.placeholder.js"></script>
		<script type="text/javascript" src="components/Jcrop/jquery.Jcrop.js"></script>
        <script type="text/javascript" src="components/imgTransform/jquery.transform.js"></script>
        <script type="text/javascript" src="components/webcam/webcam.js"></script>
		<script type="text/javascript" src="components/rating_star/rating_star.js"></script>
		<script type="text/javascript" src="components/dualListBox/dualListBox.js"></script>
		<script type="text/javascript" src="components/smartWizard/jquery.smartWizard.min.js"></script>
		<script type="text/javascript" src="components/maskedinput/jquery.maskedinput.js"></script>
        <script type="text/javascript" src="components/highlightText/highlightText.js"></script>
		<script type="text/javascript" src="components/elastic/jquery.elastic.source.js"></script>
        <script type="text/javascript" src="js/jquery.cookie.js"></script>
        <script type="text/javascript" src="js/zice.custom.js"></script>    
 
   
           
        </head>        
        <body class="dashborad">        
        <div id="alertMessage" class="error"></div>
		<!-- Header -->
        <div id="header">
                <div id="account_info"> 
					<div class="setting"><b>Welcome,</b> <b class="red">John Doe</b><img src="images/gear.png" class="gear"  alt="Profile Setting" >
                        <ul class="subnav ">
                            <li><a href="#">Setting</a></li>
							<br class="clear"/>
                        </ul>
                  </div>
					<div class="logout" title="Disconnect"><b >Logout</b> <img src="images/connect.png" name="connect" class="disconnect" alt="disconnect" ></div> 
                </div>
            </div><!-- End Header -->
			<div id="shadowhead"></div>

              <div id="left_menu">
                    <ul id="main_menu" class="main_menu">
                      <li class="limenu" ><a href="dashboard.html"><span class="ico gray shadow home" ></span><b>Dashboard</b></a></li>
                      <li class="limenu select" ><a href="#" ><span class="ico gray shadow window"></span><b>Form elements</b></a>
                        <ul>
                          <li ><a href="form.html"> basic form </a></li>
                          <li ><a href="vform.html"> validation </a></li>
                          <li ><a href="wizard.html"> wizard </a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="#"><span class="ico gray  dimensions" ></span><b>Sample pages</b></a>
                        <ul>
                          <li ><a href="profile.html"> Profile setting </a></li>
                          <li ><a href="conversation.html"> conversation</a></li>
                          <li ><a href="imagesEditor.html"> Images Editor </a></li>
                          <li ><a href="barcode.html"> barcode </a></li>
                          <li ><a href="messages.html"> messages </a></li>
                          <li ><a href="grid.html"> Grid System </a></li>
                        </ul>
                      </li>
					  <li class="limenu" ><a href="ajax.html"><span class="ico gray shadow   encrypt"></span><b>Sample ajax</b> </a></li>
                      <li class="limenu" ><a href="table.html"><span class="ico gray shadow  spreadsheet"></span><b>Tables</b> </a></li>
                      <li class="limenu" ><a href="gallery.html"><span class="ico gray shadow pictures_folder"></span><b>Gallery </b></a></li>
                      <li class="limenu" ><a href="#"><span class="ico gray shadow stats_lines"></span><b>Graph and Charts</b> </a>
                        <ul>
                          <li><a href="modalchartLive.html" class="pop_box">live chart </a></li>
                          <li><a href="chart.html">all chart</a></li>
                        </ul>
                      </li>
                      <li class="limenu" ><a href="filemanager.html"><span class="ico gray shadow  file"></span><b>File manager </b></a></li>
                      <li class="limenu" ><a href="calendar.html"><span class="ico gray shadow calendar"></span><b>Calendar </b></a></li>
                      <li class="limenu" ><a href="typography.html"><span class="ico gray  shadow paragraph_align_left"></span><b>Typography</b></a></li>
                      <li class="limenu" ><a href="inelement.html"><span class="ico gray shadow abacus"></span><b>Interface elements </b></a></li>
                      <li class="limenu" ><a href="map.html"><span class="ico gray shadow  location"></span><b>Map location </b></a></li>
                      <li class="limenu" ><a href="icon.html"><span class="ico gray  shadow satellite"></span><b>Icon and Button </b></a></li>
					  <li class="limenu" ><a href="404.html"><span class="ico gray  shadow firewall"></span><b>Error Pages</b></a></li>
                      <li class="limenu" ><a href="doc.html"><span class="ico gray  notepad"></span><b>Documentation</b></a></li>

                        
                    </ul>
              </div>
               <div id="expandbtn"><span class="off">&nbsp;</span><span class="on">&nbsp;</span></div>

            
            <div id="content">
                <div class="inner">
					<div class="topcolumn">
						<div class="logo"></div>
                            <ul  id="shortcut">
                                <li> <a href="#" title="Back To home"> <img src="images/icon/shortcut/home.png" alt="home"/><strong>Home</strong> </a> </li>
                                <li> <a href="#" title="Website Graph"> <img src="images/icon/shortcut/graph.png" alt="graph"/><strong>Graph</strong> </a> </li>
                                <li> <a href="#" title="Setting" > <img src="images/icon/shortcut/setting.png" alt="setting" /><strong>Setting</strong></a> </li> 
                                <li> <a href="#" title="Messages"> <img src="images/icon/shortcut/mail.png" alt="messages" /><strong>Message</strong></a><div class="notification" >10</div></li>
                            </ul>
					</div>
                    <div class="clear"></div>
                        
					<!-- full width -->
                    <div class="widget">
						<div class="header"><span ><span class="ico  gray connect"></span>Validation and  Live demo </span>
                            <div class="searchBox">
                            <div class="searchAutocomplete"></div>
                            <div class="searchText">
                                <form action="http://www.google.com" method="GET">
                                    <input  type="text"  nane="s" id="sAtcom"placeholder="Live Search..."/>
                                </form>
                            </div>
                            </div>
						</div><!-- End header -->	
						<div class="content" >

                  
						<div id="UITab">
							<ul class="tabs" >
								<li><a href="#tab1">  validation  </a></li>  
								<li><a href="#tab2">  live demo  <img src="images/icon/new.gif" width="20" height="9" /></a></li>            
							</ul>

						<div class="tab_container" >

                          <div id="tab1" class="tab_content"> 
                              <div class="load_page">
                                <div class="formEl_b">

                                <form action=""> 
                                <fieldset >
                                <legend>Ex.  elements <span class="small s_color">( Custom )</span></legend>
                                      <div class="section numericonly">
                                      <label> onlyNums <small>Text custom</small></label>   
                                      <div> 
                                       <input name="text" type="text"  class="large">
                                      </div>
                                     </div>
                                      <div class="section textonly">
                                      <label> onlyText <small>Text custom</small></label>   
                                      <div> 
                                          <input name="text[]" type="text"  class="large" >
                                      </div>
                                     </div>
                                      <div class="section alphaonly">
                                      <label> onlyAlpha <small>Text custom</small></label>   
                                      <div> 
                                       <input name="text[]" type="text"  class="medium"maxlength="4" >
   
                                      </div>
                                     </div>
                                      <div class="section regexonly">
                                      <label> onlyRegex <small>Text custom</small></label>   
                                      <div> 
                                          <input name="text[]" type="text"  class="large">
                                      </div>
                                     </div>
                                      <div class="section alluppercase">
                                      <label> allUpper <small>Text custom</small></label>   
                                      <div> 
                                          <input name="text[]" type="text"  class="large" >
                                      </div>
                                     </div>
                                      <div class="section">
                                      <label> custom Ex. </label>   
                                      <div> <input type="text" name="menu" id="menu"  class=" large" /></div>
                                      <div> 
                                        <input type="text" name="menu" id="menu"  class=" small" />
										<span class="f_help">Text custom help</span></div>
                                     </div>
                                     <div class="section last">
                                     <label>custom   with label <small>Text custom</small></label>
                                     <div>
                                     <input type="text" class="small" name="priceSale" id="priceSale"> <label class='red'> Sale price </label> </div>
                                     <div>
                                               <input type="checkbox" id="on_off" name="showPrice" class="on_off_checkbox"  value="1"  checked="checked"  />
                                              <span class="f_help">ON / OFF  </span> 
                                     </div>
                                     </div>
                                </fieldset>
                                </form>

                                </div>
                                 
                                <div class="formEl_b">	
                                <form id="validation"> 
                                <fieldset >
                                <legend>Ex.  elements <span class="small s_color">( Validation )</span></legend>
                                      <div class="section ">
                                      <label> input size<small>Text custom</small></label>   
                                      <div> 
                                      <input type="text" class="validate[required] large" name="f_required" id="f_required">
                                      </div>
                                      <div> 
                                        <input type="text" name="menu" id="menu"  class="validate[required,custom[onlyLetterSp]] small" />
                                         <span class="f_help">OnlyLetterSp</span>
                                      </div>
                                     </div>
                                      <div class="section ">
                                      <label> Email validate<small>Text custom</small></label>   
                                      <div> 
                                      <input type="text" class="validate[required,custom[email]]  large" name="e_required" id="e_required">
                                      </div>
                                      </div>
                                      <div class="section">
                                      <label> Login  Account  <small>Text custom</small></label>
                                      <div>
                                      <input type="text"  name="username" id="username"  class="validate[required,minSize[3],maxSize[20],] medium"  /><label>Username</label>
                                      <span class="f_help"> Username login or register. <br />Should be between 3 and not more than 20 characters.</span> 
                                      </div>
                                      <div>
                                      <input type="password"  class="validate[required,minSize[3]] medium"  name="password" id="password"  /><label>Password</label>
                                      </div>
                                      <div>
                                      <input type="password" class="validate[required,equals[password]] medium"  name="passwordCon" id="passwordCon"  /><label>Confirm Password</label>
                                            <span class="f_help"> Your password should be at least 6 characters.</span>
                                      </div>
                                      </div>
                                      <div class="section ">
                                      <label> URL validate<small>Text custom</small></label>   
                                      <div> 
                                      <input type="text" class="validate[required,custom[url]]  large" name="url_required" id="url_required" value="http://">
                                      </div>
                                      </div>
                                      <div class="section last">
                                      <div>
                                        <a class="uibutton submit_form" >submitForm</a><a class="uibutton special"   onClick="ResetForm()" title="Reset  Form"   >Clear Form</a>
                                     </div>
                                     </div>
                                </fieldset>
                                </form>

                                </div>

                              </div>	
                          </div><!--tab1-->
                          
                          
                          <div id="tab2" class="tab_content"> 
                              <div class="load_page">
                              <ul class="uibutton-group">
                                    <li><a class="uibutton icon add on_load"  name="#tab2"  title="Add Product">Add Product</a></li>
                                    <li><a class="uibutton special DeleteAll"  >Delete</a></li>
                              </ul>
                              <form class="tableName toolbar">

							  <h3>Table Name</h3>
                              <table class="display data_table2 " id="data_table">
                                <thead>
                                  <tr>
                                    <th ><input type="checkbox" id="checkAll1"  class="checkAll"/></th>
                                    <th align="left">Name</th>
                                    <th >Type</th>
                                    <th >Show ID</th>
                                    <th >Management</th>
                                  </tr>
                                </thead>
                                <tbody>
                              
                                  <tr>
                                    <td  ><input type="checkbox" name="checkbox[]" class="chkbox" checked="checked"  id="check1"/></td>
                                    <td  align="left">A ring</td>
                                    <td >ring A</td>
                                    <td >RD115599</td>
                                    <td >
                                      <span class="tip" >
                                          <a  title="Edit" >
                                              <img src="images/icon/icon_edit.png" >
                                          </a>
                                      </span> 
                                      <span class="tip" >
                                          <a id="1" class="Delete"  name="Band ring" title="Delete"  >
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span> 
                                        </td>
                                  </tr>

                                  <tr>
                                    <td  width="35" ><input type="checkbox" name="checkbox[]" class="chkbox"  id="check2"/></td>
                                    <td  align="left">B ring</td>
                                    <td >ring B</td>
                                    <td >RD115560</td>
                                    <td >
                                      <span class="tip" >
                                          <a  title="Edit" >
                                              <img src="images/icon/icon_edit.png" >
                                          </a>
                                      </span> 
                                      <span class="tip" >
                                          <a id="1" class="Delete"  name="Band ring" title="Delete"  >
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span> 
                                        </td>
                                  </tr>

                                  <tr>
                                    <td  width="35" ><input type="checkbox" name="checkbox[]" class="chkbox"  id="check3"/></td>
                                    <td  align="left">C ring</td>
                                    <td >ring C</td>
                                    <td >RD115561</td>
                                    <td >
                                      <span class="tip" >
                                          <a  title="Edit" >
                                              <img src="images/icon/icon_edit.png" >
                                          </a>
                                      </span> 
                                      <span class="tip" >
                                          <a id="1" class="Delete"  name="Band ring" title="Delete"  >
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span> 
                                        </td>
                                  </tr>

                                  <tr>
                                    <td  width="35" ><input type="checkbox" name="checkbox[]" class="chkbox"  id="check4"/></td>
                                    <td  align="left">D ring</td>
                                    <td >ring D</td>
                                    <td >RD115562</td>
                                    <td >
                                      <span class="tip" >
                                          <a  title="Edit" >
                                              <img src="images/icon/icon_edit.png" >
                                          </a>
                                      </span> 
                                      <span class="tip" >
                                          <a id="1" class="Delete"  name="Band ring" title="Delete"  >
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span> 
                                        </td>
                                  </tr>

                                  <tr>
                                    <td  width="35" ><input type="checkbox" name="checkbox[]" class="chkbox"  id="check5"/></td>
                                    <td  align="left">E ring</td>
                                    <td >ring E</td>
                                    <td >RD115562</td>
                                    <td >
                                      <span class="tip" >
                                          <a  title="Edit" >
                                              <img src="images/icon/icon_edit.png" >
                                          </a>
                                      </span> 
                                      <span class="tip" >
                                          <a id="1" class="Delete"  name="Band ring" title="Delete"  >
                                              <img src="images/icon/icon_delete.png" >
                                          </a>
                                      </span> 
                                        </td>
                                  </tr>
                                </tbody>
                              </table>
                              </form>

                              </div>	

                             <div class="show_add" style=" display:none">

                              <ul class="uibutton-group" >
                                <li><span class="tip"><a class="uibutton icon prev on_prev "  id="on_prev_pro" name="#tab2" onClick="jQuery('#validation_demo').validationEngine('hideAll')" title="Go Back" >demo pages</a></span></li>
                                <li><span class="tip"><a class="uibutton special"   onClick="ResetForm()" title="Reset  Form"   >Clear Form</a></span></li>
                              </ul>

                               <form id="validation_demo" action=""> 
                              
                                    <div class="section ">
                                    <label> input size<small>Text custom</small></label>   
                                    <div> 
                                    <input type="text" class="validate[required] large" name="f_required" id="f_required">
                                    </div>
                                    <div> 
                                      <input type="text" name="menu" id="menu"  class="validate[required,custom[onlyLetterSp]] small" />
									  <span class="f_help">OnlyLetterSp</span>
                                    </div>
                                    </div>
                                    <div class="section ">
                                    <label> Email validate<small>Text custom</small></label>   
                                    <div> 
                                    <input type="text" class="validate[required,custom[email]]  large" name="e_required" id="e_required">
                                    </div>
                                    </div>
                                    <div class="section">
                                    <label> Login  Account  <small>Text custom</small></label>
                                    <div>
                                    <input type="text"  name="username" id="username"  class="validate[required,minSize[3],maxSize[20],] medium"  /><label>Username</label>
                                    <span class="f_help"> Username login or register. <br />Should be between 3 and not more than 20 characters.</span> 
                                    </div>
                                    <div>
                                    <input type="password"  class="validate[required,minSize[3]] medium"  name="password2" id="password2"  /><label>Password</label>
                                    </div>
                                    <div>
                                    <input type="password" class="validate[required,equals[password2]] medium"  name="passwordCon2" id="passwordCon2"  /><label>Confirm Password</label>
                                          <span class="f_help"> Your password should be at least 6 characters.</span>
                                    </div>
                                    </div>
                                    <div class="section ">
                                    <label> URL validate<small>Text custom</small></label>   
                                    <div> 
                                    <input type="text" class="validate[required,custom[url]]  large" name="url_required" id="url_required" value="http://">
                                    </div>
                                    </div>
                                    <div class="section last">
                                    <div>
                                      <a class="uibutton submit_form" >submitForm</a>
                                   </div>
                                   </div>
                              </form>
                             
                             </div>	
                          </div><!--tab2-->
                          
                  </div>
                  </div><!--/END TAB/-->

               
                            <!-- clear fix -->
							<div class="clear"></div>

                        </div><!-- End content -->
                    </div><!-- End full width -->

                                           

					<!-- clear fix -->
					<div class="clear"></div>

                    <div id="footer"> &copy; Copyright 2012 <span class="tip"><a  href="#" title="Nextop.Asia co.,Ltd." >Nextop.Asia</a> </span> </div>

                </div> <!--// End inner -->
              </div> <!--// End content --> 
</body>
</html>